<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/commonjsp/jstl.jsp"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>后台用户管理</title>
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" type="text/css" href="${prefix}/stylesheets/theme.css">
<link rel="stylesheet" type="text/css" href="${prefix}/stylesheets/reveal.css">
<link rel="stylesheet" type="text/css" href="${prefix}/lib/font-awesome/css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="${prefix}/lib/bootstrap/css/bootstrap.css">

<script src="${prefix}/lib/jquery-1.8.1.min.js" type="text/javascript"></script>
<script src="${prefix}/lib/ajaxfileupload.js" type="text/javascript"></script>
<script src="${prefix}/lib/jquery-form.js" type="text/javascript"></script>
<script src="${prefix}/lib/jquery.reveal.js" type="text/javascript"></script>
<!-- Demo page code -->
<style type="text/css">
#line-chart {
	height:300px;
	width:800px;
	margin: 0px auto;
	margin-top: 1em;
}
.brand { font-family: georgia, serif; }
.brand .first {
	color: #ccc;
	font-style: italic;
}
.brand .second {
	color: #fff;
	font-weight: bold;
}
</style>

<script type="text/javascript">
$(document).ready(function () {
	//页面准备好以后，查询该操作者可以进行操作的店面和公司信息
	queryCompanyAndStoreSelect();
	
	//当公司、店面选择发生变化时
	$("#companyandstoreSelect").change(function() {
		preQueryAdminuserByStoreid();
	});
	
	//当“创建管理员”页面的“用户名”窗口的内容改变时，查询这个管理员用户名是否已经被使用了
	$("#username_create").focusout(function() {
		var username = $("#username_create").val();
		$.ajax({
			type: "post",
			async: true,
			url: "${prefix}/adminuser/exsitAdminUser?userName=" + username,
			success: function(data) {
				var jsonData = eval('(' + data + ')');
				//错误信息
				if(jsonData.responsecode != "E200") {
					alert(jsonData.errorinfo);
					return;
				}
				
				//如果返回的是true，那么代表有了这个用户名
				if(jsonData.data) {
					$("#username_create_error").html("该用户已经被使用了，请重新输入！");
					$("#username_create_error").css("display","");
					$("#repeatusername_create").val("true");
				} else {
					$("#username_create_error").html("");
					$("#username_create_error").css("display","none");
					$("#repeatusername_create").val("false");
				}
			}
		});
	});
});

//查询该操作者可以进行操作的店面和公司信息
//注意，任何页面不要抄袭这个adminuserlist中的queryCompanyAndStoreSelect方法。
//因为这个方法很特殊，公司或者店面都可以选择，然后按照选择的不同，列出不同的管理员信息
function queryCompanyAndStoreSelect() {
	$.ajax({
		type: "post",
		async: true,
		url: "${prefix}/company/queryCompanyAndStoreList?status=1",
		success: function(data) {
			var jsonData = eval('(' + data + ')');
			var listDatas = jsonData.data;
			var optionhtml = "";
			
			//如果是超级管理员，则还要增加一个“超级管理员”的选项，并且选定
			if($("#admin_level").val() == 1) {
				optionhtml += "<option style=\"margin: 5px\" type=\"super\" selected value=\"-1\">超级管理员</option>";
			}
			
			//开始构建店面
			for(var index = 0 ; listDatas != null && index < listDatas.length ; index++) {
				var optionItem = listDatas[index];
				
				optionhtml += "<option value=\"" + optionItem.companyuid + "\" type=\"company\"";
				if(index == 0 && $("#admin_level").val() != 1) {
					optionhtml += " selected ";
				}
				optionhtml += "style=\"color: #FF00FF;margin: 2px\">" + optionItem.companyName + "</option>";
				
				var stores = optionItem.stores;
				for(var sum = 0 ; stores != null && sum < stores.length ; sum++) {
					var storeItem = stores[sum];
					optionhtml += "<option style=\"margin: 8px\" type=\"store\" value=\"" + storeItem.storeuid + "\"";
					optionhtml += ">" + storeItem.storeName + "</option>";
				}
			}
			
			$("#companyandstoreSelect").html(optionhtml);
			//查询对应的后台用户信息，无论这个用户的状态怎样
			preQueryAdminuserByStoreid();
		}
	});
}

//查询指定的店面的用户信息 ，不论用户状态怎样
function preQueryAdminuserByStoreid() {
	storeid = $("#companyandstoreSelect").val();
	var selectedItem = $("#companyandstoreSelect").find("option:selected");
	var selectedType = $(selectedItem).attr("type");
	
	//如果条件成立，说明查询的是超级管理员；"company"：说明查询公司管理员；其他情况为查询店面管理员
	if(selectedType == "super") {
		$.ajax({
			type: "post",
			async: true,
			url: "${prefix}/adminuser/querySuperAdmins",
			success: function(data) {
				var jsonData = eval('(' + data + ')');
				//错误信息
				if(jsonData.responsecode != "E200") {
					alert(jsonData.errorinfo);
					return;
				}
				
				reviewTables(jsonData.data);
			}
		});
	} 
	//查询公司管理员
	else if(selectedType == "company") {
		$.ajax({
			type: "post",
			async: true,
			url: "${prefix}/adminuser/queryCompanyAdmins?companyid=" + storeid,
			success: function(data) {
				var jsonData = eval('(' + data + ')');
				//错误信息
				if(jsonData.responsecode != "E200") {
					alert(jsonData.errorinfo);
					return;
				}
				
				reviewTables(jsonData.data);
			}
		});
	}
	//查询店面管理员
	else {
		$.ajax({
			type: "post",
			async: true,
			url: "${prefix}/adminuser/queryStoreAdmins?storeid=" + storeid,
			success: function(data) {
				var jsonData = eval('(' + data + ')');
				//错误信息
				if(jsonData.responsecode != "E200") {
					alert(jsonData.errorinfo);
					return;
				}
				
				reviewTables(jsonData.data);
			}
		});
	}
}

//当收到表格数据后，由这个方法进行表格重绘
function reviewTables(jsonobjects) {
	$("#adminusertablebodyDiv").html("");
	var htmlbody = "";
	for(var index = 0 ; jsonobjects != null && index < jsonobjects.length ; index++) {
		var adminItem = jsonobjects[index];
		htmlbody += "<tr>";
		htmlbody += "<td>" + adminItem.userName + "</td>";
		htmlbody += "<td>" + adminItem.lastlogTime + "</td>";
		//管理员等级
		if(adminItem.adminLevel == 1) {
			htmlbody += "<td align=\"center\">超级管理员</td>";
		} else if(adminItem.adminLevel == 2) {
			htmlbody += "<td align=\"center\">公司管理员</td>";
		}  else if(adminItem.adminLevel == 3) {
			htmlbody += "<td align=\"center\">店面管理员</td>";
		} else {
			htmlbody += "<td align=\"center\">收银管理员</td>";
		}
		//状态
		if(adminItem.status == 1) {
			htmlbody += "<td align=\"center\">正常</td>";
		} else {
			htmlbody += "<td align=\"center\" style=\"color:#FF0000\">禁用</td>";
		}
		htmlbody += "<td align=\"center\">";
		htmlbody += "<a href=\"javascript:void(0);\" onclick=\"preModifyPassword('" + adminItem.uid + "','" + adminItem.userName + "')\" style=\"margin-right: 10px\" data-reveal-id=\"myUserPasswordDiv\">修改密码</a>";
		if(adminItem.status == 1) {
			htmlbody += "<a href=\"javascript:void(0);\" onclick=\"modifyUserStatus('" + adminItem.uid + "')\" style=\"margin-right: 10px\">禁用</a>";
		} else {
			htmlbody += "<a href=\"javascript:void(0);\" onclick=\"modifyUserStatus('" + adminItem.uid + "')\" style=\"margin-right: 10px\">启用</a>";
		}
		htmlbody += "</tr>";
	}
	
	$("#adminusertablebodyDiv").html(htmlbody);
}

//创建管理员用户前的页面准备工作
function precrateUseradmin() {
	storeid = $("#companyandstoreSelect").val();
	var selectedItem = $("#companyandstoreSelect").find("option:selected");
	var selectedType = $(selectedItem).attr("type");
	
	//清干净表单
	$("#username_create").val("");
	$("#password_create").val("");
	$("#repassword_create").val("");
	if(selectedType == "super") {
		$("#adminlevel_create").html("<option value=\"1\"> 超级管理员 </option>");
	} else if(selectedType == "company") {
		$("#adminlevel_create").html("<option value=\"2\"> 公司管理员 </option>");
	} else if(selectedType == "store") {
		$("#adminlevel_create").html("<option value=\"3\"> 店面管理员 </option><option value=\"4\"> 收银管理员 </option>");
	}
	$("#repeatusername_create").val("");
}

//创建管理员用户
function crateUseradmin() {
	var username = $.trim($("#username_create").val());
	var password = $.trim($("#password_create").val());
	var repassword = $.trim($("#repassword_create").val());
	var adminlevel = $.trim($("#adminlevel_create").val());
	var repeatusername= $.trim($("#repeatusername_create").val());
	
	var id = $("#companyandstoreSelect").val();
	var selectedItem = $("#companyandstoreSelect").find("option:selected");
	var selectedType = $(selectedItem).attr("type");
	var companyid = "";
	var sotreid = "";
	if(selectedType == "company") {
		companyid = id;
	} else if(selectedType == "store"){
		sotreid = id;
	}
	
	var goodForm = true;
	var error = "";
	//首先进行填写资料的判断
	if(username == "") {
		goodForm = false;
		error += "请填写管理员用户名！<br>";
	}
	if(password == "") {
		goodForm = false;
		error += "密码信息必须填写！<br>";
	}
	if(repassword == "") {
		goodForm = false;
		error += "请再填写一次密码！<br>";
	}
	if(password != repassword) {
		goodForm = false;
		error += "您两次输入的密码不正确，请检查！<br>";
	}
	if(repeatusername == "true") {
		goodForm = false;
		error += "您输入的用户名已被使用，请更换！<br>";
	}
	
	if(!goodForm) {
		alert(error);
		return;
	}
	
	//======组织数据，准备提交
	var storeid = $("#companyandstoreSelect").val();
	var data = "username=" + username + "&password=" + password + "&adminlevel=" + adminlevel + "&storeid=" + storeid + "&companyid=" + companyid;
	$.ajax({
		type: "post",
		async: true, 
		url: "${prefix}/adminuser/appendAdminuser", 
		data: data,
		success: function(data) {
			var jsonData = eval('(' + data + ')');
			//错误信息
			if(jsonData.responsecode != "E200") {
				alert(jsonData.errorinfo);
				return;
			}
			
			//重新查询列表
			preQueryAdminuserByStoreid();
			
			//重新整理表单
			precrateUseradmin();
			
			alert("添加成功个，您可以继续添加，也可以退出该对话框!");
		}
	});
}

//进入指定用户修改密码的页面前的数据初始化
function preModifyPassword(adminid , adminusername) {
	$("#adminid_modifypassword").val(adminid);
	$("#adminusername_modifypassword").html("人员：" + adminusername);
	$("#password_modifypassword").val();
	$("#repassword_modifypassword").val();
}

//进行指定用户的密码修改
function modifyPassword() {
	//首先进行填写信息的判断
	var password = $("#password_modifypassword").val();
	var repassword = $("#repassword_modifypassword").val();
	var goodForm = true;
	var error = "";
	
	if(password == "") {
		goodForm = false;
		error += "密码信息必须填写！<br>";
	}
	if(repassword == "") {
		goodForm = false;
		error += "请再填写一次密码！<br>";
	}
	if(password != repassword) {
		goodForm = false;
		error += "您两次输入的密码不正确，请检查！<br>";
	}
	if(!goodForm) {
		alert(error);
		return;
	}
	
	//=======进行提交
	var adminid = $("#adminid_modifypassword").val();
	var data = "adminid=" + adminid + "&password=" + password;
	$.ajax({
		type: "post",
		async: true, 
		url: "${prefix}/adminuser/modifyAdminuserPassword", 
		data: data,
		success: function(data) {
			var jsonData = eval('(' + data + ')');
			//错误信息
			if(jsonData.responsecode != "E200") {
				alert(jsonData.errorinfo);
				return;
			}
			
			alert("修改密码成功!");
		}
	});
}

//修改指定用户的状态。
function modifyUserStatus(adminid) {
	$.ajax({
		type: "post",
		async: true, 
		url: "${prefix}/adminuser/modifyUserStatus?adminid=" + adminid, 
		success: function(data) {
			var jsonData = eval('(' + data + ')');
			//错误信息
			if(jsonData.responsecode != "E200") {
				alert(jsonData.errorinfo);
				return;
			}
			
			//重新查询列表
			preQueryAdminuserByStoreid();
		}
	});
}
</script>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
	<script src="${prefix}/javascripts/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="${prefix}/lib/font-awesome/docs/assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" href="${prefix}/lib/font-awesome/docs/assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="${prefix}/lib/font-awesome/docs//assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="${prefix}/lib/font-awesome/docs//assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="${prefix}/lib/font-awesome/docs//assets/ico/apple-touch-icon-57-precomposed.png">
</head>

<!--[if lt IE 7 ]> <body class="ie ie6"> <![endif]-->
<!--[if IE 7 ]> <body class="ie ie7"> <![endif]-->
<!--[if IE 8 ]> <body class="ie ie8"> <![endif]-->
<!--[if IE 9 ]> <body class="ie ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> 
<body>
<!--<![endif]-->

<div class="navbar">
	<%@ include file="/commonjsp/userbar.jsp"%>
</div>

<div class="container-fluid">
	<div class="row-fluid">
		<%@ include file="/commonjsp/mainmenu.jsp"%>
		<!-- 列表 -->
		<div class="span9">
			<!-- 列表头 -->
			<h1 class="page-title">后台操作员</h1>
			<c:if test="${admin.adminLevel == 1 || admin.adminLevel ==2}">
			<div class="btn-toolbar">
				<a href="javascript:void(0);" class="btn btn-primary" onclick="precrateUseradmin()" data-reveal-id="createUserDiv"><i class="icon-plus"></i> 新建用户 </a>
				<div class="btn-group"></div>
			</div>
			</c:if>
			
			<!-- 店面列表 -->
			<div class="well" style="width: 160px;height: 480px; float: left; margin-right:10px ; padding: 10px">
				<input type="hidden" name="admin_name" id="admin_name" value="${admin.userName }"/>
				<input type="hidden" name="admin_level" id="admin_level" value="${admin.adminLevel }"/>
				<input type="hidden" name="admin_companyid" id="admin_companyid" value="${admin.company.uid }"/>
				<input type="hidden" name="admin_storeid" id="admin_storeid" value="${admin.storefront.uid }"/>
				<select style="width: 100% ; height: 100% ; border: 0px" multiple="multiple" name="companyandstoreSelect" id="companyandstoreSelect">
					
				</select>
			</div>
			
			<!-- 列表正文 -->
			<div class="well" style="float: left; min-width: 900px; margin-top: 5px">
				<table class="table">
					<thead>
						<tr>
							<th>用户名</th>
							<th>最后登录时间</th>
							<th>用户角色</th>
							<th>状态</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody id="adminusertablebodyDiv">
						
					</tbody>
				</table>
			</div>
		</div>
	</div>
	
	<!-- Le javascript
	================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="${prefix}/lib/bootstrap/js/bootstrap.js"></script>
	
	<!-- 创建管理员界面 -->
	<div id="createUserDiv" class="reveal-modal" style="width: 200px;height: 350px;">
		<input type="hidden" name="repeatusername_create" id="repeatusername_create" value="false"/>
		<label style="padding: 5px;margin: 0px;">用户名：</label>
		<label style="padding: 5px;margin: 0px;">
			<input type="text" id="username_create" style="width: 180px ; height: 30px ; padding: 0px ; margin: 0px;"/>
			<font style="color:#FF0000">*</font>
		</label>
		<label style="padding: 5px;margin: 0px; color:#FF0000;display:none" id="username_create_error"></label>
		<label style="padding: 5px;margin: 0px;">输入新的密码：</label>
		<label style="padding: 5px;margin: 0px;">
			<input type="password" id="password_create" style="width: 180px ; height: 30px ; padding: 0px ; margin: 0px;"/>
			<font style="color:#FF0000">*</font>
		</label>
		<label style="padding: 5px;margin: 0px;">请在输入一次：</label>
		<label style="padding: 5px;margin: 0px;">
			<input type="password" id="repassword_create" style="width: 180px ; height: 30px ; padding: 0px ; margin: 0px;"/>
			<font style="color:#FF0000">*</font>
		</label>
		<label style="padding: 5px;margin: 0px;">用户角色：</label>
		<label style="padding: 5px;margin: 0px;">
			<select style="height: 30px;width: 120px" id="adminlevel_create">
				<option value="2"> 店面管理员 </option>
				<option value="3"> 收银管理员 </option>
			</select>
		</label>
		<label style="padding: 5px;margin: 0px;">
			<button id="crateUseradminButton" onclick="crateUseradmin()" class="btn btn-primary"><i class="icon-save"></i> 创建用户 </button>
		</label>
		<a class="close-reveal-modal">×</a>
	</div>
	
	<!-- 修改密码 -->
	<div id="myUserPasswordDiv" class="reveal-modal" style="width: 200px;height: 200px;">
		<input type="hidden" id="adminid_modifypassword" value=""/>
		<font color="#999999" style="padding: 5px ;margin: 0px;" id="adminusername_modifypassword"></font><br/>
		<label style="padding: 5px;margin: 0px;">输入新的密码：</label>
		<label style="padding: 5px;margin: 0px;">
			<input type="password" id="password_modifypassword" style="width: 180px ; height: 30px ; padding: 0px ; margin: 0px;"/>
		</label>
		<label style="padding: 5px;margin: 0px;">请在输入一次：</label>
		<label style="padding: 5px;margin: 0px;">
			<input type="password" id="repassword_modifypassword" style="width: 180px ; height: 30px ; padding: 0px ; margin: 0px;"/>
		</label>
		<label style="padding: 5px;margin: 0px;">
			<button id="saveUserPasswordButton" onclick="modifyPassword()" class="btn btn-primary"><i class="icon-save"></i> 修改密码 </button>
		</label>
		<a class="close-reveal-modal">×</a>
	</div>
</div>
</body>
</html>